import React, { Component } from 'react';
import {observer} from 'mobx-react'
import todoStore from './appStore'

const App = (props) => {
  return (
    <div>
      <h1> 任务列表 </h1>
      { todoStore.todos.map((item, index) => (
          <div key={index}> 任务内容:
            <input type="text" value={item.task}
                onChange={(e) => todoStore.setTodoTask(index, e.target.value)}
            />
            || 是否完成: {item.completed ? '完成' : '待办'} || 负责人: {item.assignee}
            <input type='checkbox'
              checked={item.completed}
              onChange={()=> todoStore.setComplete(index)} />
            <button onClick={()=>todoStore.removeTodo(index)}>
              删除
            </button>
          </div>
        )
      )}
      <h3> 任务状态: { todoStore.report } </h3>
      <h3> 已完成任务数: { todoStore.completedTodosCount } </h3>
      <h2> 添加任务 </h2>
      任务内容: <input type="text" ref={(input) => this.task = input} />
      负责人: <input type="text" ref={(input) => this.assignee = input} />
      <button onClick={() =>
        todoStore.addTodo(this.task.value, this.assignee.value)}>
          添加
      </button>
    </div>
  );
}

export default observer(App);
